﻿<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col :span="8" class="logo">
        <img src="../asset/images/hand.png">
        {{sysName}}
      </el-col>
      <el-col :span="2">
        <span class="projectname">
          &nbsp;
          <span v-bind:class="{none:controlShow===false}">{{project.name}}</span>
        </span>
      </el-col>
      <el-col :span="6" v-if="this.userIdentity != 3">
        <el-menu :default-active="activeIndex" class="top-menu" mode="horizontal">
          <el-menu-item index="1" @click="presentation">项目展示</el-menu-item>
          <el-menu-item index="2" @click="gather">信息管理</el-menu-item>
          <el-menu-item index="3" @click="ground">土地利用</el-menu-item>
          <el-menu-item index="4" @click="app">绩效评价</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="4" class="userinfo">
        <el-dropdown trigger="hover">
          <span class="el-dropdown-link userinfo-inner">
            <i class="fa fa-user-circle-o"></i>
            &nbsp;&nbsp;{{name}}
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>我的消息</el-dropdown-item>
            <el-dropdown-item @click.native="passwordButton">修改密码</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <el-dialog title="修改密码" :visible.sync="passwordEditMe" :modal="false">
        <el-form :model="editPasswordMe" :rules="rulesPassMe">
          <el-form-item label="原密码" prop="oldPassword" :label-width="formLabelWidth">
            <el-input v-model="editPasswordMe.oldPassword" placeholder="请输入原密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword" :label-width="formLabelWidth">
            <el-input v-model="editPasswordMe.newPassword" placeholder="请输入新密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="重复新密码" prop="checknewpass1" :label-width="formLabelWidth">
            <el-input v-model="editPasswordMe.checknewpass1" placeholder="请再次输入新密码" type="password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class>
          <el-button @click="passwordEditMe = false">取消</el-button>
          <el-button type="primary" v-if="buttonMePawd" @click="submitEditPasswordMe">确定</el-button>
        </div>
      </el-dialog>
      <el-col :span="24" class="breadcrumb-container">
        <!-- 地图开始 -->
        <el-col :span="24" class="h-w-100" v-bind:class="{none:show===true}">
          <div id="container" class="amap-container"></div>
          <!-- <div class="projects-title">
            <span>项目总数：{{ projectCount }}</span>
            <br>
            <span>我创建的项目数：{{ createCount }}</span>
            <br>
            <span>我参与的项目数：{{ joinCount }}</span>
          </div> -->
          <!-- <div class="chart-pie-projects">
            <div id="chart-pie-projects" class="proplane chartLine"></div>
          </div> -->
          <!-- <div class="chart-line-projects">
            <div id="chart-line-projects" class="proplane chartLine"></div>
          </div> -->
          <div class="projects-list-panel">
            <div class="proplane title">项目列表</div>
            <div id="projectsListPanel" class="proplane scrollbar1">
              <ul id="myList"></ul>
            </div>
          </div>
        </el-col>
        <!-- 地图结束 -->
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    var validatePass4 = (rule, value, callback) => {
      if (this.editPasswordMe.oldPassword === "") {
        callback(new Error("请输入原密码"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editPasswordMe.newPassword) {
        callback(new Error("两次输入密码不一致!"));
        this.buttonMePawd = false;
      } else {
        this.buttonMePawd = true;
        callback();
      }
    };
    return {
      projectCount: 0,
      createCount: 0,
      joinCount: 0,
      sysName: "山水林田湖草生态修复集成跟踪系统",
      name: "",
      listmenu: "北京地铁",
      show: false,
      presentationMenu: false,
      gatherMenu: false,
      appMenu: false,
      controlShow: false,
      formLabelWidth: "120px",
      passwordEditMe: false,
      buttonMePawd: false,
      project: "",
      token: "",
      activeIndex: "1",
      userIdentity: "",
      // 修改自身密码
      editPasswordMe: {
        oldPassword: "",
        newPassword: "",
        checknewpass1: ""
      },
      rulesPassMe: {
        oldPassword: [
          { required: true, validator: validatePass4, trigger: "blur" }
        ],
        newPassword: [{ required: true, message: "请输入新密码" }],
        checknewpass1: [
          { required: true, validator: validatePass3, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    //获取本地保存token
    this.token = sessionStorage.getItem("token");
    this.userModel
      .userToken(this.token)
      .then(res => {
        if (res.status != 200) {
          this.$confirm("登录超时，请重新登录", "提示", {
            type: "warning"
          })
            .then(() => {
              this.$router.push("/login");
            })
            .catch(() => {
              this.$router.push("/login");
            });
        } else {
          this.userIdentity = res.data.userIdentity.id;
          this.name = res.data.name;
        }
      })
      .catch(err => {
        this.$router.push("/login");
        console.log(err.message);
      });
    //  this.loginModel.checkInfo('bob',1).then(res => {
    //    console.log(res);
    //  }).catch(err => {
    //    console.log(err.message)
    //  })
    
    var _this = this;
    this.map = new ct.Map("container", {
      url: "/api/project/getAll/" + this.token,
      allProjectCallBack: function(data) {
        var options = {
          axisData: [],
          redData: [],
          orangeData: [],
          yellowData: [],
          normalData: []
        };
        for (var i in data) {
          var pro = data[i];
          // 项目名称
          options.axisData.push(pro.name);
          // 红
          options.redData.push(Math.round(Math.random() * 5));
          // 橙
          options.orangeData.push(Math.round(Math.random() * 10));
          // 黄
          options.yellowData.push(Math.round(Math.random() * 10));
          // 绿
          options.normalData.push(Math.round(Math.random() * 100));
        }
        // ct.ProjectsLineChart("chart-line-projects", options);
      },
      enterProject: function(data) {
        _this.project = data;
        console.log(data.name);
        _this.showCont();
      },
      // hoverRecord: function(record) {
      //   ct.chartLine.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: record.index
      //   });
      // }
    });

    // ct.ProjectsPieChart = function(id) {
    //   this.chartLine = echarts.init(document.getElementById(id));
    //   this.chartLine.setOption({
    //     title: {
    //       text: "项目状态",
    //       x: "center",
    //       textStyle: {
    //         color: "#fff",
    //         fontSize: 14
    //       }
    //     },
    //     tooltip: {
    //       trigger: "item",
    //       formatter: "{a} <br/>{b} : {c} ({d}%)"
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: "left",
    //       data: ["受控状态", "待评估状态", "未评定状态", "告警状态"],
    //       textStyle: {
    //         color: "#fff"
    //       }
    //     },
    //     series: [
    //       {
    //         name: "访问来源",
    //         type: "pie",
    //         radius: "55%",
    //         center: ["50%", "60%"],
    //         data: [
    //           { value: 335, name: "受控状态" },
    //           { value: 310, name: "待评估状态" },
    //           { value: 234, name: "未评定状态" },
    //           { value: 135, name: "告警状态" }
    //         ],
    //         itemStyle: {
    //           emphasis: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)"
    //           }
    //         }
    //       }
    //     ]
    //   });
    // };

    // ct.ProjectsLineChart = function(id, data) {
    //   this.chartLine = echarts.init(document.getElementById(id));

    //   this.chartLine.setOption({
    //     title: {
    //       text: "告警统计列表",
    //       textStyle: {
    //         color: "#fff",
    //         fontSize: 14
    //       }
    //     },
    //     tooltip: {
    //       show: true,
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "shadow"
    //       }
    //     },
    //     legend: {
    //       data: ["红色预警", "橙色预警", "黄色预警", "正常"],
    //       textStyle: {
    //         color: "#fff"
    //       }
    //     },
    //     xAxis: {
    //       data: data.axisData,
    //       axisLabel: {
    //         textStyle: {
    //           color: "#fff"
    //         },
    //         formatter: function(value, i) {
    //           return String.fromCharCode("A".charCodeAt(0) + i);
    //         }
    //       },
    //       axisTick: {
    //         show: false
    //       },
    //       axisLine: {
    //         show: false
    //       },
    //       z: 10
    //     },
    //     yAxis: {
    //       axisLine: {
    //         show: false
    //       },
    //       axisTick: {
    //         show: false
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: "#999"
    //         }
    //       }
    //     },
    //     grid: {
    //       top: "25px",
    //       left: "3%",
    //       right: "4%",
    //       bottom: "10px",
    //       containLabel: true
    //     },
    //     dataZoom: [
    //       {
    //         type: "inside"
    //       }
    //     ],
    //     series: [
    //       {
    //         name: "红色预警",
    //         type: "bar",
    //         stack: "预警",
    //         data: data.redData,
    //         itemStyle: {
    //           color: "#c62e29"
    //         }
    //       },
    //       {
    //         name: "橙色预警",
    //         type: "bar",
    //         stack: "预警",
    //         data: data.orangeData,
    //         itemStyle: {
    //           color: "#ce6725"
    //         }
    //       },
    //       {
    //         name: "黄色预警",
    //         type: "bar",
    //         stack: "预警",
    //         data: data.yellowData,
    //         itemStyle: {
    //           color: "#fff600"
    //         }
    //       },
    //       {
    //         name: "正常",
    //         type: "bar",
    //         stack: "预警",
    //         data: data.normalData,
    //         itemStyle: {
    //           color: "#85c324"
    //         }
    //       }
    //     ]
    //   });

    //   this.chartLine.on("mouseover", function(target) {
    //     _this.map
    //       .markerList()
    //       .setHoverMarkerIcon(
    //         _this.map.markerList().getRecordByDataIndex(target.dataIndex).marker
    //       );
    //   });
    //   this.chartLine.on("mouseout", function(target) {
    //     _this.map
    //       .markerList()
    //       .setDefaultMarkerIcon(
    //         _this.map.markerList().getRecordByDataIndex(target.dataIndex).marker
    //       );
    //   });
    // };

    // ct.ProjectsPieChart("chart-pie-projects");
    this.getCount();
  },
  methods: {
    getCount() {
      this.projectModel.projectCount().then(res => {
        this.joinCount = res.data.JoinCount;
        this.createCount = res.data.CreatCount;
      });
      this.projectModel.projectGetAllCount().then(res => {
        if (res.data != null) {
          this.projectCount = res.data;
        }
      });
    },
    showCont() {
      this.show = !this.show;
      this.controlShow = !this.controlShow;
      this.presentationMenu = true;
      this.$router.push({
        path: "/photo",
        query: { projectId: this.project.id }
      });
    },
    presentation() {
      this.$router.push("/");
    },
    gather() {
      this.userModel
        .userToken(this.token)
        .then(res => {
          var userIdentityId = res.data.userIdentity.id;
          if (userIdentityId == 1) {
            this.$router.options.routes[11].hidden=false
            this.$router.push("/userlist");
          } else {
            this.$router.push("/projectList");
          }
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    app() {
      this.$router.push("/kuangshan");
    },
     ground() {
      this.$router.push("/tudileixing");
    },
    onSubmit() {
      console.log("submit!");
    },
    handleopen() {
      //console.log('handleopen');
    },
    handleclose() {
      //console.log('handleclose');
    },
    passwordButton() {
      this.passwordEditMe = true;
    },
    //修改密码
    submitEditPasswordMe() {
      let dataPwd = {
        type: 1,
        oldPassword: this.editPasswordMe.oldPassword,
        newPassword: this.editPasswordMe.newPassword
      };
      this.userModel
        .editPassword(dataPwd)
        .then(res => {
          if (res.status === 200) {
            this.passwordEditMe = false;
            this.$message({
              type: "success",
              message: res.msg
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg
            });
          }
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    //退出登录
    logout: function() {
      var _this = this;
      this.$confirm("确认退出吗?", "提示", {
        //type: 'warning'
      })
        .then(() => {
          this.loginModel
            .logout()
            .then(res => {
              _this.$router.push("/login");
            })
            .catch(err => {
              console.log(err.message);
            });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background-color: #475669;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }

    .logo {
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #ffffff;
      }
    }
    .logo-width {
      width: 400px;
    }
    .logo-collapse-width {
      width: 60px;
    }
  }
  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
    z-index: 10;
    aside {
      width: 180px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      width: 120px;
    }
    .content-container {
      flex: 1;
      overflow-y: hidden;
      padding: 0px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        box-sizing: border-box;
      }
    }
  }
}
</style>
<style>
.el-menu {
  background-color: #475669;
}
.el-submenu .el-menu {
  background-color: #475669;
}
.el-menu1 {
  border-right: 2px solid #dfdbdb;
}
.l-menu .el-menu-item {
  color: #ffffff;
}
.el-menu-item,
.el-submenu__title {
  color: #ffffff;
}
.el-submenu .el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #5d646d;
}
.input-css {
  margin-left: 10px;
  width: 100px;
}
.main1 {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0px;
  overflow: hidden;
  border-right: 1px solid #dfdbdb;
  z-index: 1;
}
.top-menu .el-menu-item {
  color: #dfdbdb;
}
.top-menu .is-active {
  color: #20a0ff;
}
.el-menu-item:hover {
  background-color: #d1dbe5;
}
.item {
  margin-top: 10px;
  margin-right: 50px;
}
.close {
  position: fixed;
  right: 0px;
}
.box {
  width: 400px;
}
.top {
  text-align: center;
}
.left {
  float: left;
  width: 60px;
}

.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

.item {
  margin-right: 10px;
}

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}
.menu-list:not(.el-menu--collapse) {
  width: 140px;
  min-height: 200px;
}
.menu-list .el-menu-item {
  color: #ffffff;
}
.menu-list .is-active {
  color: #20a0ff;
}
.flexible {
  z-index: 11;
}
.flexible .el-radio-button__inner {
  background-color: transparent;
  border: 0px;
  color: #ffffff;
}
.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0;
}
.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0;
}
.search-box {
  width: 1300px;
  height: 700px;
}
.amap-demo {
  height: 300px;
}

.amap-demo {
  height: 300px;
}

.search-box {
  display: flex;
  left: 20px;
}

.amap-page-container {
  width: 1500px;
  height: 1000px;
  z-index: -10;
}
#panel {
  z-index: 0;
}
.h-w-100 {
  width: 100%;
  height: 100%;
}
.amap-overlays {
  z-index: 0;
}
.dg.a {
  margin-right: 45px;
}
.projectname {
  line-height: 80px;
}
.none {
  display: none;
}
.dg.main {
  margin-top: 70px;
  margin-right: 40px;
  z-index: 0;
}
/*#popup{ margin-left: 140px;}*/
.el-menu--horizontal > .el-menu-item.is-active {
  color: #20a0ff;
}
.content-container {
  overflow-y: hidden;
}
</style>
